<template>
    <div v-if = "isShow" class="goods-info">
        <div class="info-desc">
            <div class="start"></div>
            <div class="desc">{{detailInfo.desc}}</div>
            <div class="end"></div>
        </div>
        <div class="info-key">{{detailInfo.detailImage[0].key}}</div>
        <div class="info-list">
            <img v-for="(item, index) in detailInfo.detailImage[0].list" :src="item" alt="" @load="finishLoad">
        </div>
    </div>
</template>

<script>
    import {debounce} from 'common/utils'

    export default {
        name: 'DetailGoodsInfo',
        
        props: {
            detailInfo: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },

        computed: {
            isShow() {
                return Object.keys(this.detailInfo).length > 0
            }
        },

        created () {
            // let className = document.documentElement  // 获取html
            
        },

        methods: {
            finishLoad() {
                this.$emit('itemLoad');
            }
        }
    }
</script>

<style scoped> 
    .shop-info {
        padding: 20px 0px;
        border-bottom: 5px solid #f2f5f8;
    }

    .info-desc {
        padding: 20px 15px;
    }

    .info-desc .start, .info-desc .end {
        width: 90px;
        height: 1px;
        background-color: #a3a3a5;
        position: relative;
    }

    .info-desc .end {
        float: right;
    }

    .info-desc .desc {
        margin: 15px 0;
    }

    .info-desc .start::before, .info-desc .end::after {
        display: inline-block;
        content: "";
        width: 5px;
        height: 5px;
        position: absolute;
        bottom: 0;
        background-color: black;
    }

    .info-desc .end::after {
        right: 0;
    }

    .info-key {
        margin: 10px 0 10px 15px;
        color: #333;
        font-size: 15px;
    }

    .info-list img {
        width: 100%;
    }
</style>